<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/8/15
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="${pageContext.request.contextPath}/jQuery/jquery-3.6.0.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap460/css/bootstrap.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap460/css/bootstrap.min.css"/>

<script type="text/javascript" src="${pageContext.request.contextPath}/bootstrap460/js/bootstrap.js"></script>

<link href="http://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<div style="padding: 20px"  class="container">
    <button class="btn btn-success btn-sm mt-3 mb-3" onclick="add()">添加寝室</button>
    <table class="table" id="mytable">
        <thead>
        <tr>
            <th>寝室编号</th>
            <th>类别</th>
            <th>应住人数</th>
            <th>实住人数</th>
            <th>住宿费用</th>
            <th>寝室公用电话</th>
            <th style="display: none">所属楼房号</th>
            <th>所属楼房</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${dorms}" var="d">
            <tr id="d_${d.dor_Id}">
                <td class="id">${d.dor_Id}</td>
                <td class="sex">${d.dor_Sex}</td>
                <td class="num">${d.dor_Num}</td>
                <td class="fact">${d.dor_Fact}</td>
                <td class="price">${d.dor_Price}</td>
                <td class="tel">${d.dor_Tel}</td>
                <td class="b_id" style="display: none">${d.build_id}</td>
                <td>${d.build_name}</td>
                <td>
                    <a class="btn btn-info" onclick="edit(${d.dor_Id})">更改</a>
                    <a class="btn btn-danger" onclick="del(${d.dor_Id})">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <!-- 添加用的模态框 -->
    <div class="modal fade" id="addModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">添加寝室</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <form id="addForm" action="add" method="post" onsubmit="return false;">
                            <div class="form-group">
                                <label>寝室编号</label>
                                <input type="text" id="dor_id" name="dor_id" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>类别</label>
                                <form>
                                    <input type="radio" name="dor_sex" value="男寝">男寝
                                    <input type="radio" name="dor_sex" value="女寝">女寝
                                </form>
                            </div>
                            <div class="form-group">
                                <label>应住人数</label>
                                <select class="selectpicker" id="dor_num" name="dor_num" onchange="selectNumber()">
                                    <option>——请选择——</option>
                                    <option>1人</option>
                                    <option>2人</option>
                                    <option>4人</option>
                                    <option>6人</option>
                                    <option>8人</option>
                                    <option>10人</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>实住人数</label>
                                <select class="selectpicker" id="dor_fact" name="dor_fact">
                                    <option>——请选择——</option>
                                </select>
                            </div>
                            <script>
                                function selectNumber() {
                                    var person=[[0,1],
                                                [0,1,2],
                                                [0,1,2,3,4],
                                                [0,1,2,3,4,5,6],
                                                [0,1,2,3,4,5,6,7,8],
                                                [0,1,2,3,4,5,6,7,8,9,10]]
                                    var index1 = document.getElementById("dor_num").selectedIndex;
                                    var option1 = document.getElementById("dor_fact");
                                    option1.options.length=1;
                                    for (var x = 0;x<person[index1-1].length;x++){
                                        var opt = document.createElement("option");
                                        opt.innerHTML = person[index1-1][x];
                                        option1.appendChild(opt);
                                    }
                                }
                            </script>
                            <div class="form-group">
                                <label>价格</label>
                                <input type="text" id="dor_price" name="dor_price" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>公共电话号</label>
                                <input type="text" id="dor_tel" name="dor_tel" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>所属楼房号</label>
                                <input type="text" id="build_id" name="build_id" class="form-control">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="add_do()">确认</button>
                    </div>
                </div>
            </div>
        </div>

    <!-- 编辑用的模态框 -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">修改信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="editForm" action="add" method="post" onsubmit="return false;">
                        <div class="form-group">
                            <label>寝室编号</label>
                            <input type="text" id="edit_id" name="edit_id" class="form-control" readonly>
                        </div>
                        <div class="form-group">
                            <label>类别</label>
                            <input type="text" id="edit_sex" name="edit_sex" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>应住人数</label>
                            <input type="text" id="edit_num" name="edit_num" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>实住人数</label>
                            <input type="text" id="edit_fact" name="edit_fact" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>价格</label>
                            <input type="text" id="edit_price" name="edit_price" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>公共电话号</label>
                            <input type="text" id="edit_tel" name="edit_tel" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>所属楼房</label>
                            <input type="text" id="editB_id" name="editB_id" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="edit_do()">确认</button>
                </div>
            </div>
        </div>
    </div>

    <%--删除用的模态框--%>
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">确定修改</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>寝室</label>
                        <input type="text" id="dorId" name="dorId" class="form-control" readonly>
                    </div>
                    <p>您确定要删除么？</p>
                    <div class="form-group" style="display: none">
                        <label>楼房</label>
                        <input type="text" id="buildId" name="buildId" class="form-control" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="del_do()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/hui/lib/datatables/1.10.15/jquery.dataTables.js">
<script type="text/javascript" charset="utf8" src="${pageContext.request.contextPath}/hui/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script>
    $(function () {
        $('#mytable').DataTable();
    })

    function add() {
        //弹出模态框
        $("#addModal").modal("show");
    }

    function add_do() {
        //开始发送请求    ajax({json})
        $.ajax({
            //发往何处
            url:"add",
            method:"post",
            data: {
                dor_id:$("#dor_id").val(),
                dor_sex:$('input[name = "dor_sex"]:checked').val(),
                dor_num:$("#dor_num").val(),
                dor_fact:$("#dor_fact").val(),
                dor_price:$("#dor_price").val(),
                dor_tel:$("#dor_tel").val(),
                build_id:$("#build_id").val()
            },
            success:function (data) {
                console.log(data);
                if (data == 'ok'){
                    alert("添加成功");
                    location.reload();
                }else alert("添加失败");
            },
            error:function (e) {
                console.log(e);
            }
        });
    }
    function edit(id) {
        $("#editModal").modal("show");
        $("#edit_id").val($("#d_" + id + " .id").text())
        $("#edit_sex").val($("#d_" + id + " .sex").text())
        $("#edit_num").val($("#d_" + id + " .num").text())
        $("#edit_fact").val($("#d_" + id + " .fact").text())
        $("#edit_price").val($("#d_" + id + " .price").text())
        $("#edit_tel").val($("#d_" + id + " .tel").text())
        $("#editB_id").val($("#d_" + id + " .b_id").text())
    }

    function edit_do() {
        $.ajax({
            url:"edit",
            method:"post",
            data: {
                id:$("#edit_id").val(),
                sex:$("#edit_sex").val(),
                num:$("#edit_num").val(),
                fact:$("#edit_fact").val(),
                price:$("#edit_price").val(),
                tel:$("#edit_tel").val(),
                build_id:$("#editB_id").val()
            },
            success:function (data) {
                console.log(data)
                if (data == 'ok'){
                    location.reload();
                }else alert("修改失败")
            },
            error:function (e) {
                console.log(e);
                console.log("通讯错误");
            }
        });
    }

    function del(id) {
        $("#deleteModal").modal("show");
        $("#dorId").val($("#d_" + id + " .id").text());
        $("#buildId").val($("#d_" + id + " .b_id").text())
    }

    function del_do() {
        $.ajax({
            url:"del",
            method:"post",
            data:{
                id:$("#dorId").val(),
                build_id:$("#buildId").val()
            },
            success:function (data) {
                console.log(data);
                if ("ok" == data){
                    location.reload();
                }else alert("删除失败");
            },
            error:function (e) {
                console.log(e);
                console.log("错误")
            },
        })
    }
</script>
</body>
</html>
